<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script>
// vue3：组合式API
export default {
  name : 'Person',
  setup(){
    // setup函数中的this时undefined,vue3中已经弱化了this
    let name = '张三'        //注意此时的name不是响应式的
    let age = 18             //注意此时的age不是响应式的
    let tel = '13893023356'  //注意此时的tel不是响应式的
    // return {name:name,age}   //交出去的名字和定义名字相同可简写

    // 方法
    function changeName(){
      name = 'zhang-san'   //这样修改name，name值修改了，但页面显示不会修改，因为他不是响应式的
    }
    function changeAge(){
      age += 1
    }
    function showTel(){
      alert(tel)
    }

    return {name,age,changeName,changeAge,showTel}

  }
}
</script>

<style>
.person{
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button{
  margin: 0 5px;
}

</style>